<template>
  <div class="desc">
    <van-nav-bar title="向日葵之歌" left-text left-arrow @click-left="$router.go(-1)">
      <van-icon name="share" slot="right" />
      <van-icon name="clock-o" slot="right" />
    </van-nav-bar>
    <div class="container">
      <div class="img-card">
        <img :src="prodesc.coverImgUrl" alt />
        <p>{{prodesc.desc}}</p>
        <p>{{prodesc.smallTitle}}</p>
        <p>
          <span>￥{{prodesc.product_price}}</span>
          <span>已售6.12万件</span>
        </p>
      </div>
      <div class="detail">
        <p class="longp">
          <span>花语</span>
          <span>下雨的时候给他撑伞，寒冷的时候给他臂弯，天黑了永远有一盏灯为他点亮，晨起时给他一缕阳光</span>
        </p>
        <p class="shortp">
          <span>材料</span>
          <span>99支红玫瑰</span>
        </p>
        <p class="shortp">
          <span>配送</span>
          <span>全国</span>
        </p>
        <p class="shortp">
          <span>附送</span>
          <span>下单填写留言，即免费赠送精美贺卡</span>
        </p>
      </div>
      <div style="height:1rem"></div>
    </div>
    <div class="desc-foot">
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" />
        <van-goods-action-icon icon="cart-o" text="购物车" :info="getAllCount" :to="{name:'Cart'}" />
        <van-goods-action-button type="warning" text="加入购物车" @click="addToCart" />
        <van-goods-action-button type="danger" text="立即购买" @click="buyNow" />
      </van-goods-action>
    </div>
  </div>
</template>
<style scoped>
@import "../css/desc.css";
</style>
<script>
import axios from "axios";
import { mapState, mapMutations, mapAction, mapGetters } from "vuex";
export default {
  data() {
    return {
      id: this.$route.params.id,
      token: ""
    };
  },
  created() {
    const id = this.$route.params.id;
    console.log(id);
    console.log(this.prodesc);
    axios
      .get(`http://192.168.17.95:3000/api/v1/flowers/${id}`)
      .then(res => {
        let data = res.data.flowers;
        console.log(data);
        this.saveDetail({
          data: data
        });
      });
  },
  methods: {
    ...mapMutations("product", ["saveDetail", "savecarts"]),
    addToCart() {
      let token = localStorage.getItem("token");
      if (token) {
        axios
          .post("http://192.168.17.95:3000/api/v1/cart/addcart", {
            product: this.id,
            quantity: 1,
            headers: {
              yangnb: `ynb ${token}`
            }
          })
          .then(res => {
            console.log(res);
            let token = localStorage.getItem("token");
            axios
              .get("http://192.168.17.95:3000/api/v1/cart/cartlist", {
                headers: {
                  yangnb: `ynb ${token}`
                }
              })
              .then(res => {
                console.log(res);
                this.savecarts({
                  carts: res.data.carts
                });
              })
              .catch(err => {
                console.log(err);
              });
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        this.$router.push({ name: "Login" });
      }
    },
    buyNow() {
      console.log(this.token);
      this.token = localStorage.getItem("token");
      console.log(this.token);
      if (this.token == undefined) {
        this.$toast("请先登录");
        this.$router.push({ name: "Login" });
      } else {
        console.log(0);
      }
    }
  },
  computed: {
    ...mapState("product", ["prodesc"]),
    ...mapGetters("product", ["getAllCount"])
  }
};
</script>